<template>
  <view class="home">
    <view class="wz-top">
      <image src="/static/topbj.png" mode="" class="topbjs"></image>
      <view class="cont">
        <view class="c-itemsa">
          {{title}}
        </view>
      </view>
    </view>
    <div class="search-top">
      <div class="city" @click="pickerShow = true">
        <!-- <u-icon name="map-fill" size="39"></u-icon> -->
        <view class="cityimg">
          <image style="width: 40rpx;height: 40rpx" src="../../static/imgs/Slice 114@2x.png" mode=""></image>
        </view>
        <div class="tit">
          {{citys}}
        </div>

      </div>
      <div class="search" @click='goSearch()'>
        <u-icon name="search" size="30"></u-icon>
        <div class="tt">
          请输入关键词
        </div>
      </div>
    </div>

    <!-- 轮播 -->
    <div class="banner" @click='goevebts()'>
      <swiper :indicator-dots="0" :autoplay="true" :interval="3000" :duration="1000">
        <block v-for="(item, index) in banner" :key="item.id">
          <swiper-item>
            <image :src="item"></image>
          </swiper-item>
        </block>
      </swiper>
    </div>

    <!-- 滚动 -->
    <view class="notice-bar" @click="golist()">
      <!-- <u-notice-bar :text="text1" mode="link" speed="35" url="/pages/componentsB/tag/tag"></u-notice-bar> -->
      <image src="../../static/imgs/Slice 83.png" mode=""></image>
      <view class="scroll">
        <text class="scroll-content">{{text1}}</text>
      </view>
      <u-icon name="arrow-right" color="#666" size="20"></u-icon>
    </view>

    <view class="promotion">
      <swiper :indicator-dots="0" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item>
          <image src="/static/b.png" mode="" @click="gobuilding()"></image>
        </swiper-item>
      </swiper>
    </view>


    <div class="task">
      <div class="task-item" v-for="item in 2">
        <image src="/static/taskbj.png" mode="" class="taskbj"></image>
        <div class="content">
          <div class="tit" @click='goevebts()'>
            <div class="icon">
              <image src="../../static/imgs/Slice 100@2x.png" mode=""></image>
            </div>
            <div class="tt overflow">长清大学生红叶谷汉服真人秀开团</div>
            <div class="right">
              <u-icon name="arrow-right" color="#FF4C4C"></u-icon>
            </div>
          </div>
          <div class="img" @click='goevebts()'>
            <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
            <div class="tags">报名进行中</div>
            <div class="hits">
              <u-icon name="eye-fill" color="white"></u-icon>
              <div class="p">1238</div>
            </div>
          </div>
          <div class="order">
            <div class="p">报名时间：2023月6日24-2023年7月24日</div>
            <div class="p">可报名人数：60人</div>
            <div class="p">已报名人数：50人</div>
            <div class="ps">
              <div class="pp">
                剩余名额：10人
              </div>
              <div class="price">
                ￥
                <text>629</text>
              </div>
            </div>
          </div>

          <div class="btn" @click='godetail()'>立即报名</div>
        </div>
      </div>
    </div>


    <div class="video">
      <div class="video-item" v-for="item in 1">
        <div class="content" @click='govadio()'>
          <div class="tit">
            <div class="icon">
              <image src="../../static/imgs/Slice 115@2x.png" mode=""></image>
              <!-- <u-icon name="bookmark-fill" color="white"></u-icon> -->
            </div>
            <div class="tt overflow">精彩瞬间</div>
            <div class="right">
              <u-icon name="arrow-right" color="#6AA3FF"></u-icon>
            </div>
          </div>
          <div class="img">
            <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
            <div class="tags">
              <image src="../../static/imgs/Slice 97@2x.png" mode=""></image>
              <!-- <u-icon name="play-right-fill" color="white" size='40'></u-icon> -->
            </div>
            <div class=" hits">
              <u-icon name="eye-fill" color="white"></u-icon>
              <div class="p">1238</div>
            </div>
          </div>
          <div class="order">
            <div class="tt">长清大学生红叶谷汉服真人秀</div>
            <div class="p">发布时间：2023-3-12</div>

          </div>
        </div>
      </div>
    </div>



    <u-picker mode="region" @confirm="regionConfirm" v-model="pickerShow"
      :area-code='["13", "1303", "130304"]'></u-picker>
  </view>
</template>

<script>
  import tabBar from '@/components/tabBar/tabBar.vue'
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
        banner: [
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        ],
        title: '烈焰影记',
        citys: "济南",
        share: {
          title: '66666', //分享时标题名字
          path: 'pages/index/index', // 全局分享的路径，比如 首页
        },
        // 省市
        pickerShow: false
      }
    },

    onLoad() {
      this.initPageDate()
    },
    methods: {
      async initPageDate() {
        var res1 = await this.$http({
          url: "GetConfig",
          data: {
            title: 'logo'
          }
        });
      },
      // 选择地区回调
      regionConfirm(e) {
        this.citys = e.city.label
        // console.log(e.city.label);
        // this.selectedRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;
      },
      goSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      govadio() {
        uni.navigateTo({
          url: '/pages/splendid/video_details'
        })
      },
      golist() {
        uni.navigateTo({
          url: '/pages/message_list/message_list'
        })
      },
      gobuilding() {
        uni.navigateTo({
          url: '/pages/team_building/team_building'
        })
      },
      godetail() {
        uni.navigateTo({
          url: '/pages/order_details/order_details'
        })
      },
      goevebts() {
        uni.navigateTo({
          url: '/pages/events/events_proceed'
        })
      }
    }
  }
</script>

<style lang="scss">
  .home {
    padding-bottom: 80rpx;
    background-color: #fff;

    .video {
      width: 686rpx;
      margin: 0 auto;
      margin-top: 32rpx;

      .video-item {
        width: 100%;
        height: 566rpx;
        position: relative;
        background: linear-gradient(136deg, #EBF2FF 0%, #DDECFF 100%);
        overflow: hidden;
        margin-bottom: 32rpx;
        border-radius: 20rpx;

        .content {
          width: 686rpx;
          height: 566rpx;
          padding: 32rpx;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;

          .tit {
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            margin-bottom: 20rpx;

            font-weight: bold;

            .icon {
              width: 40rpx;
              height: 40rpx;
              background: linear-gradient(146deg, #93BCFE 0%, #6AA3FF 100%);
              border-radius: 50%;
              opacity: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 12rpx;

              >image {
                width: 40rpx;
                height: 40rpx;
              }
            }

            .tt {
              width: 450rpx;
              font-weight: bold;
              color: #6AA3FF;
            }

            .right {
              position: absolute;
              right: 0;
            }
          }

          .img {
            width: 622rpx;
            height: 348rpx;
            border-radius: 20rpx;
            opacity: 1;
            overflow: hidden;
            position: relative;

            image {
              width: 100%;
              height: 100%;
            }

            .hits {
              width: 622rpx;
              padding-right: 22rpx;
              height: 70rpx;
              background: linear-gradient(360deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
              position: absolute;
              bottom: 0;
              left: 0;
              display: flex;
              align-items: center;
              color: #fff;
              justify-content: flex-end;

              font-size: 24rpx;

              .p {
                margin-left: 12rpx;
                font-size: 24Rpx;
              }
            }

            .tags {
              position: absolute;
              left: 269rpx;
              top: 132rpx;
              width: 100rpx;
              height: 100rpx;
              background: rgba(106, 163, 255, 0.8);
              display: flex;
              font-size: 24rpx;
              align-items: center;
              border-radius: 50%;
              justify-content: center;
            }
          }

          .order {
            margin-top: 20rpx;

            .tt {
              font-weight: 700;
              font-size: 28rpx;
            }

            .p {
              margin-top: 10rpx;
              font-size: 24rpx;
              color: #666;
            }


          }

          .btn {
            width: 622rpx;
            height: 58rpx;
            background: linear-gradient(90deg, #FF7777 0%, #FF4848 100%);
            border-radius: 82rpx 82rpx 82rpx 82rpx;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24rpx;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
            color: #FFFFFF;
            margin-top: 50rpx;
          }
        }
      }
    }


    .task {
      width: 686rpx;
      margin: 0 auto;
      margin-top: 30rpx;

      .task-item {
        width: 100%;
        // height: 770rpx;
        position: relative;
        background-color: #fff7f5;
        overflow: hidden;
        margin-bottom: 32rpx;
        border-radius: 20rpx;

        .taskbj {
          width: 686rpx;
          height: 770rpx;
        }

        .content {
          width: 686rpx;
          height: 770px;
          padding: 32rpx;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;

          .tit {
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            margin-bottom: 20rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;
              background: linear-gradient(146deg, #FF8282 0%, #FF4141 100%);
              border-radius: 50%;
              opacity: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 12rpx;

              >image {
                width: 40rpx;
                height: 40rpx;
              }
            }

            .tt {
              width: 450rpx;
              font-weight: bold;
            }

            .right {
              position: absolute;
              right: 0;
            }
          }

          .img {
            width: 622rpx;
            height: 348rpx;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;

            >image {
              width: 100%;
              height: 100%;
            }

            .hits {
              width: 622rpx;
              padding-right: 22rpx;
              height: 70rpx;
              background: linear-gradient(360deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
              position: absolute;
              bottom: 0;
              left: 0;
              display: flex;
              align-items: center;
              color: #fff;
              justify-content: flex-end;

              .p {
                margin-left: 12rpx;
                font-size: 24rpx;
              }
            }

            .tags {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              width: 184rpx;
              height: 48rpx;
              background: #FF4C4C;
              color: #fff;
              display: flex;
              font-size: 24rpx;
              align-items: center;
              border-radius: 20rpx 0 20rpx 0;
              justify-content: center;
            }
          }

          .order {
            margin-top: 25rpx;

            .p {
              margin-bottom: 20rpx;
              font-size: 24rpx;

              &:nth-child(3) {
                margin-bottom: 12rpx;
              }
            }

            .ps {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .pp {
                font-size: 24rpx;
              }

              .price {
                font-weight: bold;
                color: #EF5353;
                line-height: 40rpx;

                >text {
                  font-size: 40rpx;
                }
              }
            }
          }

          .btn {
            width: 622rpx;
            height: 58rpx;
            background: linear-gradient(90deg, #FF7777 0%, #FF4848 100%);
            border-radius: 82rpx 82rpx 82rpx 82rpx;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24rpx;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
            color: #FFFFFF;
            margin-top: 40rpx;
          }
        }
      }
    }

    .promotion {
      /* background-color: #ffffff; */
      padding: 15rpx 0;
      padding-bottom: 0rpx;
      margin-top: 15rpx;

      swiper {
        width: 686rpx;
        height: 130rpx;
        margin: 0 auto;

        image {
          width: 686rpx;
          height: 130rpx;
          margin: 0 auto;
          display: block;
        }
      }
    }

    .notice-bar {
      display: flex;

      padding: 0 32rpx;
      width: 686rpx;
      height: 74rpx;
      line-height: 74rpx;
      margin: 22rpx auto;
      background: #FDFCF1;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(159, 126, 66, 0.05);
      border-radius: 16rpx 16rpx 16rpx 16rpx;


      >image {
        margin: auto 0;
        width: 84rpx;
        height: 42rpx;
      }

      .scroll {
        overflow: auto;
        /* 启用滚动功能 */
        white-space: nowrap;

        /* 防止文字换行 */
        overflow: hidden;

        .scroll-content {
          display: inline-block;
          /* 将内容作为行内块元素显示 */
          animation: scroll 10s linear infinite;
          /* 设置动画效果，滚动时间为10秒 */
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }

      @keyframes scroll {
        0% {
          transform: translateX(50%);
        }

        /* 初始位置，不偏移 */
        100% {
          transform: translateX(-100%);
        }

        /* 结束位置，完全向左偏移 */
      }
    }

    .banner {
      width: 686rpx;
      height: 384rpx;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      z-index: 4;
      margin-top: 20rpx;

      swiper {
        width: 686rpx;
        margin: 0 auto;
        height: 384rpx;

        overflow: hidden;
        border-radius: 0;

        swiper-item {
          border-radius: 25rpx;
          overflow: hidden;

          image {
            height: 100%;
            width: 100%;
          }
        }

      }

    }

    .search-top {
      width: 686rpx;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search {
        width: 506rpx;
        height: 62rpx;
        background: #FFFFFF;
        border-radius: 74rpx 74rpx 74rpx 74rpx;
        opacity: 1;
        display: flex;
        align-items: center;
        color: #949494;
        font-size: 24rpx;
        padding-left: 20rpx;

        .tt {
          margin-left: 10rpx;
        }
      }

      .city {
        margin-left: 6rpx;
        // width: 110rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 700;

        .cityimg {

          >image {
            vertical-align: middle;
          }
        }
      }
    }

    .wz-top {
      background-color: #5bcce7;
      height: 180rpx;
      color: #333;
      position: relative;
      z-index: 1;
      margin-bottom: 10rpx;

      .topbjs {
        width: 100%;
        height: 452rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .cont {
        padding: 0 20rpx;
        display: flex;
        position: relative;
        z-index: 2;

        .c-itemsa {
          line-height: 270rpx;
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 32rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

      }

    }
  }
</style>